<template>
  <div style="margin-top: 20px">
    <a-row>
      <a-col :span="24">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="销售额">
            <a-row>
              <a-col :span="18">
                <div id="sales" class="echartsContain"></div>
              </a-col>
              <a-col :span="6"> 门点销售额排名
                 </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="访问量">
            <p> Content of tab 2 </p>
          </a-tab-pane>
          <a-button type="link" slot="tabBarExtraContent">今日</a-button>
          <a-button type="link" slot="tabBarExtraContent">本周</a-button>
          <a-button type="link" slot="tabBarExtraContent">本月</a-button>
          <a-button type="link" slot="tabBarExtraContent">全年</a-button>
          <a-range-picker slot="tabBarExtraContent" @change="onChange" :default-value="[
              moment('2015/10/02', dateFormat),
              moment('2015/10/10', dateFormat),
            ]" :format="dateFormat">
            <a-icon slot="suffixIcon" type="smile" />
          </a-range-picker>
        </a-tabs>
      </a-col>
    </a-row>
    <!-- 活动实时交易情况  销售额类别占比 -->
    <a-row :gutter="16">
      <a-col :span="12">
        <a-tabs>
          <a-tab-pane tab="活动实时交易情况" type="card">
            <div class="activityWrap">
              <a-statistic title="今日交易总额" :value="124543233">
                <template #suffix>
                  <span>元</span>
                </template>
              </a-statistic>
              <a-statistic title="销售目标完成率" :value="92">
                <template #suffix>
                  <span>%</span>
                </template>
              </a-statistic>
              <a-statistic title="每秒交易总额" :value="234">
                <template #suffix>
                  <span>元</span>
                </template>
              </a-statistic>
            </div>
          </a-tab-pane>
        </a-tabs>
        <div id="activity" class="echartsContain"></div>
      </a-col>
      <a-col :span="12">
        <div class="salesCategory">
          <a-tabs>
            <a-tab-pane key="1" tab="销售额类别占比">
              <div class="card-container">
                <a-radio-group :value="size" @change="handleSizeChange">
                  <a-radio-button value="large"> 全部渠道 </a-radio-button>
                  <a-radio-button value="default"> 线上 </a-radio-button>
                  <a-radio-button value="small"> 书店 </a-radio-button>
                </a-radio-group>
              </div>
                <div id="salesCategory" class="echartsContain"></div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-col>
    </a-row>
    <!-- 访问时长趋势  XX指数 -->
    <a-row :gutter="16">
      <a-col :span="16">
        <a-tabs>
          <a-tab-pane tab="访问时长趋势" type="card">
            <div class="durationWrap">
              <a-statistic title="平均访问时长" :value="210">
                <template #suffix>
                  <span>S</span>
                </template>
              </a-statistic>
              <div class="durationTit"></div>
              <a-button type="link" slot="tabBarExtraContent">今日</a-button>
              <a-button type="link" slot="tabBarExtraContent">本周</a-button>
              <a-button type="link" slot="tabBarExtraContent">本月</a-button>
              <a-button type="primary" slot="tabBarExtraContent">全年</a-button>
              <a-range-picker slot="tabBarExtraContent" @change="onChange" :default-value="[
                  moment('2015/10/02', dateFormat),
                  moment('2015/10/10', dateFormat),
                ]" :format="dateFormat">
                <a-icon slot="suffixIcon" type="smile" />
              </a-range-picker>
            </div>
        <div id="duration" class="echartsContain"></div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="8">
        <a-tabs>
          <a-tab-pane tab="XX 指数" type="card">
                    <div id="radar" class="echartsContain"></div>
        <div class="radarWrap">
          <a-statistic title="个人" :value="33" />
          <a-divider type="vertical" />
          <a-statistic title="团队" :value="28" />
          <a-divider type="vertical" />
          <a-statistic title="部门" :value="33" />
        </div> 
        </a-tab-pane>
        </a-tabs>

      </a-col>
    </a-row>
    <!-- 活动发布 -->
    <a-row :gutter="16">
      <a-col :span="24">
        <a-tabs>
          <a-tab-pane tab="活动发布" type="card">
            <a-row :gutter="16">
              <a-col :span="8">
                <div>
                  <a-statistic title="累计发布活动数" :value="4320" suffix="周同比" :value-style="{ color: '#3f8600' }" style="margin-left: 50px">
                    <template #prefix>
                      <a-icon type="caret-up" />
                      <span>12%</span>
                    </template>
                  </a-statistic>
                  <a-statistic title="本周上新活动数" :value="342" suffix="周环比" class="demo-class" :value-style="{ color: '#cf1322' }" style="margin-left: 50px">
                    <template #prefix>
                      <a-icon type="caret-down" />
                      <span>10%</span>
                    </template>
                  </a-statistic>
                </div>
              </a-col>
              <a-col :span="16">
                <div class="durationWrap">
                  <span>近一周活动发布</span>
                  <div class="durationTit"></div>
                  <a-button type="link" slot="tabBarExtraContent">今日</a-button>
                  <a-button type="link" slot="tabBarExtraContent">本周</a-button>
                  <a-button type="link" slot="tabBarExtraContent">本月</a-button>
                  <a-button type="primary" slot="tabBarExtraContent">全年</a-button>
                  <a-range-picker slot="tabBarExtraContent" @change="onChange" :default-value="[
                      moment('2015/10/02', dateFormat),
                      moment('2015/10/10', dateFormat),
                    ]" :format="dateFormat">
                    <a-icon slot="suffixIcon" type="smile" />
                  </a-range-picker>
                </div>
                <div id="stackArea" class="echartsContain"></div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>

      </a-col>
    </a-row>
    <!-- 数据标题 -->
    <a-row :gutter="[16, 16]">
      <a-col :span="8">
        <a-tabs>
          <a-tab-pane tab="数据标题1" type="card">
            <div id="stackBar" class="echartsContain"></div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="8">
        <a-tabs>
          <a-tab-pane tab="数据标题2" type="card">
            <div id="bubble" class="echartsContain"></div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="8">
        <a-tabs>
          <a-tab-pane tab="数据标题3" type="card">
            <div id="basicScatter" class="echartsContain"></div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>

    <!-- 各类目占比 -->
    <a-row>
      <a-col :span="24">
        <a-tabs>
          <a-tab-pane tab="各类目占比" type="card"> </a-tab-pane>
        </a-tabs>
        <div id="CategoryPie" class="echartsContain"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      // 事件选择框
      dateFormat: "",
      dateFormatList: ["DD/MM/YYYY", "DD/MM/YY"],
      // 销售额类别占比
      mode: "top",
      data: [
        {
          title: "1号店",
          num: "1",
        },
        {
          title: "2号店",
          num: "2",
        },
        {
          title: "3号店",
          num: "3",
        },
        {
          title: "4号店",
          num: "4",
        },
      ],
    };
  },
  methods: {
    moment,
    // 销售额趋势
    salesChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("sales"));
      // 绘制表格
      myChart.setOption({
        color: ["#1890FF"],
        title: {
          text: "销售额趋势",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10月",
              "11月",
              "12月",
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            show: true,
            axisLine: { show: false },

            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            barWidth: "30%",
            data: [300, 780, 900, 520, 230, 500, 300, 260, 770, 500, 260, 300],
          },
        ],
      });
    },
    // 活动实时交易情况
    activityChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("activity"));
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: "category",
          data: ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"],
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
          axisLine: { show: false },

          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            },
          },
        },
        series: [
          {
            data: [1100, 2900, 3200, 1700, 1100, 3800, 3200],
            type: "line",
            color: ["#1890FF"],
          },
          {
            data: [1900, 600, 2300, 2000, 2800, 4330, 2120],
            type: "line",
            color: ["#2FC25B"],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 销售额类别占比
    salesCategoryChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("salesCategory")
      );
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 10,
          data: [
            "家用电器",
            "食用酒水",
            "个护健康",
            "服饰箱包",
            "母婴产品",
            "其它",
          ],
        },
        series: [
          {
            name: "销售额类别占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 36, name: "家用电器" },
              { value: 20, name: "食用酒水" },
              { value: 16, name: "个护健康" },
              { value: 10, name: "服饰箱包" },
              { value: 9, name: "母婴产品" },
              { value: 9, name: "其它" },
            ],
            color: [
              "#1890FF",
              "#2FC25B",
              "#FACC14",
              "#F04864",
              "#8543E0",
              "#13C2C2",
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 访问时长趋势
    durationChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("duration"));
      // 指定图表的配置项和数据
      let option = {
        color: ["#1890FF", "#2FC25B", "#FACC14"],
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", ">150s", "90-150s", "<150s"],
            ["1月", 43.3, 85.8, 93.7],
            ["2月", 83.1, 73.4, 55.1],
            ["3月", 86.4, 65.2, 82.5],
            ["4月", 86.4, 65.2, 82.5],
            ["5月", 72.4, 53.9, 39.1],
            ["6月", 72.4, 53.9, 39.1],
            ["7月", 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar", barWidth: 10 },
          { type: "bar", barWidth: 10 },
          { type: "bar", barWidth: 10 },
          // {
          //   name: "协议",
          //   type: "bar",
          //   stack: "总量",
          //   barWidth: 30, //柱图宽度
          //   /*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
          //   data: seriesyx,
          // },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // XX 指数
    radarChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("radar"));
      // 指定图表的配置项和数据
      let option = {
        // title: {
        //   text: "基础雷达图",
        // },
        color: ["#1890FF", "#2FC25B", "#FACC14"],

        tooltip: {},
        legend: {
          data: ["个人", "团队", "部门"],
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#000",
              backgroundColor: "#fff",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "引用", max: 6500 },
            { name: "口碑", max: 16000 },
            { name: "热度", max: 30000 },
            { name: "贡献", max: 38000 },
            { name: "产量", max: 52000 },
          ],
        },
        series: [
          {
            // name: "部门",
            type: "radar",

            // itemStyle: {
            //   emphasis: {
            //     color: ["#1890FF", "#2FC25B", "#FACC14"],
            //     lineStyle: {
            //       // width: 10,
            //     },
            //   },
            // },
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000],
                // name: "个人",
              },
              {
                value: [5000, 14000, 28000, 31000, 42000],
                // name: "团队",
              },
              {
                value: [4000, 13000, 20000, 39000, 48000],
                // name: "部门",
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 活动发布
    stackAreaChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("stackArea"));
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "10-23周日",
            "10-24周一",
            "10-25周二",
            "10-26周三",
            "10-27周四",
            "10-28周五",
            "10-29周日",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1890FF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#1890FF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#ffffff", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "#5865FF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            areaStyle: {},
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 数据标题1
    stackBarChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("stackBar"));
      // 指定图表的配置项和数据
      let option = {
        color: ["#1890FF", "#2FC25B", "#FACC14"],

        title: {
          // text: "分类销量",
        },
        legend: {
          y: "bottom",
          data: ["百货", "电子", "服装"],
        },
        xAxis: [
          {
            type: "category",
            data: [20190612, 20190613, 20190614, 20190615],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "百货",
            type: "bar",
            stack: "1",
            barWidth: 30,
            data: [10, 14, 17, 8],
          },
          {
            name: "电子",
            type: "bar",
            stack: "1",
            data: [16, 12, 9, 22],
          },
          {
            name: "服装",
            type: "bar",
            stack: "1",
            data: [18, 8, 13, 20],
            label: {
              show: true,
              position: "top",
              color: "black",

              formatter: function (params) {
                return params.value;
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 数据标题2
    bubbleChart() {
      let myChart = this.$echarts.init(document.getElementById("bubble"));
      myChart.setOption({
        color: ["#1890FF", "#FACC14"],
        title: {
          // text: "数据标题2",
        },
        // legend: {
        //   y: "bottom",
        //   data: ["百货", "电子", "服装"],
        // },
        xAxis: [
          {
            type: "category",
            data: ['咨询', '个案', '长期探访', '危机介入'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "百货",
            type: "bar",
            stack: "1",
            barWidth: 30,
            data: [10, 14, 17, 8],
          },
          {
            name: "电子",
            type: "bar",
            stack: "1",
            data: [16, 12, 9, 22],
          },
        ],
      });
    },
    // 数据标题3
    scatterChart() {
      let myChart = this.$echarts.init(document.getElementById("basicScatter"));
      myChart.setOption({
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68],
            ],
            type: "scatter",
          },
        ],
      });
    },
    // 各类目占比
    categoryPieChart() {
      let myChart = this.$echarts.init(document.getElementById("categoryPie"));
      myChart.setOption({
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68],
            ],
            type: "scatter",
          },
        ],
      });
    },
    onChange() { },
    // 销售类别占比 - tabs
    callback(val) {
      console.log(val);
    },
  },
  mounted() {
    this.salesChart();
    this.activityChart();
    this.salesCategoryChart();
    this.durationChart();
    this.radarChart();
    this.stackAreaChart();
    this.stackBarChart();
    this.bubbleChart();
    this.scatterChart();
    this.categoryPieChart();
  },
};
</script>

<style lang="less" scoped>
.echartsContain {
  width: 100%;
  height: 300px;
}
.ant-btn-link {
  color: #111;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.activityWrap {
  width: 80%;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  .ant-statisti {
    flex: 1;
  }
}
.durationWrap {
  display: flex;
  justify-content: space-between;
  .durationTit {
    display: flex;
    justify-content: end;
  }
}
// 销售额类别占比
// .salesCategory {
// }
// XX 指数

.radarWrap {
  display: flex;
  justify-content: center;
}
</style>